import { ref } from 'vue'
// 导入监控方法
import { useIntersectionObserver } from '@vueuse/core'
// 需求:
// 1.通过useObserve函数可以实现对元素或组件是否进入可视区域的监控
// 2. 进入可视区域后发送请求

export function useObserve (apiFn) {
  // 监控元素组件进入可视区域
  /**
     * 步骤:
     * 1. 通过ref获取要监控的元素或组件
     * 2. 代用 useIntersectionObserver (要监控的元素DOM对象或组件实例, 监控的回调函数)
     *    说明: 监控函数执行完, 可以结构出stop方法 => 停止监控
     */
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    // isIntersecting 监控数据的回调函数,页面刷新执行一次,没进入执行false, 进入执行true
    ([{ isIntersecting }]) => {
      console.log('监控回调函数: ', isIntersecting)
      if (isIntersecting) {
        console.log('进入可视区域了,发请求')
        // 发请求 (动态)
        apiFn()
        // getGoods()
        // stop() 关闭监控, 不关闭会反复执行发请求
        stop()
      }
    },
    { threshold: 0 } // 0代表刚进入就执行
  )
  // 返回回去监控元素的变量
  return { target }
}
